<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="dialogWidth" lock-scroll :show-close="false" :close-on-click-modal="false">
    <div class="loger-body">
      <slot></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { computed, ref, toRefs } from 'vue';

  const dialogVisible = ref(false);

  const props = defineProps({
    size: {
      type: String,
      default: 'small',
    },
  });

  const emits = defineEmits({
    submit: null,
    cancel: null,
  });

  const { size } = toRefs(props);
  const dialogWidth = computed(() => (size.value === 'big' ? 960 : size.value === 'middle' ? 720 : 480));
  const title = ref<string>('弹框');
  // 工具方法
  const open = (str: string) => {
    title.value = str;
    dialogVisible.value = true;
  };

  const close = () => {
    dialogVisible.value = false;
  };
  const submit = () => {
    emits('submit', close);
  };
  const cancel = () => {
    emits('cancel', close);
  };
  defineExpose({
    open,
    close,
    submit,
    cancel,
  });
</script>

<style lang="scss" scoped>
  .loger-body {
    max-height: 500px;
    overflow: auto;
  }
</style>
